<template>
	<view class="body">
		<xk-header :headerbg="true" :back="true" title="反馈评价"></xk-header>
		<view class="list" >
			<view class="list-item header" >
				<view>报修单号:  {{data.apply_no}}</view>
			</view>
			<view class="data-item">
				<view class="order-info">
					<view class="info-item"><view class="key">报修人：</view>{{data.apply_user}}</view>
					<view class="info-item"><view class="key">业主单位：</view>{{data.apply_company_name}}</view>
					<view class="info-item"><view class="key">物业编号：</view>{{data.property_code}}</view>
					<view class="info-item"><view class="key">报修设施：</view>{{data.buliding_no + data.storey_no + (data.repair_Address||"")}}</view>
					<view class="info-item"><view class="key">预约上门时间：</view>{{data.plan_date}}</view>
					<view class="info-item"><view class="key">报修描述：</view><text>{{data.repair_content}}</text></view>
					<!-- <view class="info-item error"><view class="key">异常记录：</view>墙壁表层脱落</view> -->
					<view v-if="data.repair_image" class="info-item"><view class="key"></view>
						<image-list :pics="data.repair_image"></image-list>
					</view>
				</view>
			</view>
		</view>

		<view class="list" >
			<view class="list-item header">
				<view>维修记录</view>
			</view>
			<view  class="data-item">
				<view class="order-info">
					<view class="info-item"><view class="key">接单人：</view>{{data.receiver}}</view>
					<view class="info-item"><view class="key">维修类型：</view>{{data.repair_type_nametwo}}</view>
					<view class="info-item"><view class="key">维修时间：</view>{{data.finish_time}}</view>
					<view @click="viewMate" class="info-item" style="justify-content: space-between;">
						<view class="key">物料领用：</view>
						<view style="display: flex; align-items: center;">
							<text  v-if="data.materials.length > 0" class="right-title1" style="color: #2C72FF;">已添加{{data.materials.length}}种物料</text>
							<text v-else class="right-title1" style="color: #2C72FF;">查看明细</text>
							<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
						</view>
					</view>
					<view class="info-item"><view class="key">工作时长(小时)：</view>{{data.work_time}}</view>
					<view class="info-item"><view class="key">结算金额(元)：</view>{{data.repair_money}}</view>
					<view class="info-item"><view class="key">支付方：</view>{{data.payer_str == '10' ? '租户' : '物业'}}</view>
					<view class="info-item"><view class="key">维修描述：</view><text>{{data.record_remark}}</text></view>
					<!-- <view class="info-item error"><view class="key">异常记录：</view>墙壁表层脱落</view> -->
					<!-- <view v-if="data.record_image" class="info-item"><view class="key"></view>
						<image-list :pics="data.record_image"></image-list>
					</view> -->
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-item header" >
				<view>对服务进行评价</view>
			</view>
			<view>
				<radio-group @change="radioChange">
					<view class="info radio" style="display:flex; justify-content: space-between;">
						<radio v-for="(item, index) of radios" :key="index" :value="item.data_value" :checked="index === radioIndex"
						color="#007AFF" style="transform:scale(0.8)">{{item.data_text}}</radio>
					</view>
				</radio-group>
				<view class="list-item textarea">
					<view>评价信息：</view>
					<textarea v-model="evaluateContent" placeholder="请输入您对本次反馈服务的评价" placeholder-class="placeholder"/>
				</view>
			</view>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn" @click="onSubmit()">提交评价</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				repairId: "",
				data: {},
				radioIndex: -1,
				radios:[],
				types: {},
				evaluateContent: ""
			};
		},
		onLoad(options){
			if (options && options.repairId) {
				this.repairId = options.repairId
			}
			this.getData()
		},
		methods:{
			getData(){
				this.$api.pmServiceRepair_getPmServiceRepairSingle(this.repairId).then((res)=>{
					this.data = res.task
					this.initInfo()
				})
			},
			initInfo() {
				this.$api.baseData_getToolDataList("PM_FEEDBACK_FBTYPE").then(res => {
					console.warn("反馈类型：", res)
					for (let item of res) {
						this.types[item.data_value] = item.data_text;
					}
				})
				this.$api.baseData_getToolDataList("PM_FEEDBACK_EVALUATE_RESULT").then(res => {
					console.warn("评价类型：", res)
					this.radios = res
				})
			},
			radioChange(evt) {
				for (let i = 0; i < this.radios.length; i++) {
					if (this.radios[i].data_value === evt.detail.value) {
						this.radioIndex = i;
						break;
					}
				}
			},
			viewMate() {
				uni.navigateTo({
					url: "/pagesC/report-repair/report-repair-sp-detail?mates=" + JSON.stringify(this.data.materials)
				})
			},
			onSubmit() {
				if (this.radioIndex == -1) {
					this.$util.toast("请选择评价")
					return
				}

				if (this.radioIndex == 2 && !this.evaluateContent) {
					this.$util.toast("请输入您对本次反馈服务的评价")
					return
				}

				this.$util.confirm({
					content: "确认要提交评价信息？",
					confirmText: "提交",
				}).then((isConfirm)=>{
					if (isConfirm) {
						this.$util.post({
							url: "app/pmServiceRepair/evaluate",
							data: {
								repair_id: this.data.repair_id,
								evaluate_result: this.radios[this.radioIndex].data_value,
								evaluate_content: this.evaluateContent
							}
						}).then(res => {
							this.$util.toast("提交成功")
							
							uni.$emit('reloadReportRepairList')

							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/common/from.scss';
</style>
